<template>
  <page-header-wrapper>
    <a-card :bordered="false"
            title="前端页面自动刷新时间">
      <a-form-model v-bind="queryFormItemLayout" ref="ruleForm" :model="ruleForm" :rules="rules">
        <a-row :gutter="20">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="刷新周期" prop="refreshCycle">
             <div style="display:flex; align-items: center">
               <a-input v-model="ruleForm.refreshCycle" style="margin-right: 10px"></a-input> 秒
             </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="24">
            <a-form-model-item label=" " :colon="false">
              <a-button  type="primary" @click="onSubmit">
                确认
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {getRefreshTime, updateRefreshTime} from "@/api/api";

export default {
  data () {
    return {
      queryFormItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      ruleForm: {
        id: '',
        refreshCycle: ''
      },
      rules: {
        refreshCycle: [{required: true, message: '输入不能为空'}],
      },
    }
  },
  created() {
    getRefreshTime().then(res => {
      console.log(res)
      this.ruleForm.id = res.id
      this.ruleForm.refreshCycle = res.refreshCycle
    })
  },
  methods: {
    onSubmit () {
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          updateRefreshTime(this.ruleForm).then(res => {
            this.$message.success(res.msg)
          })
        }
      });
    }
  }
}
</script>

<style>

</style>
